<!doctype html>
<html lang="en-US">

  <head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="WhitestormJS is a 3D Javascript engine based on Three.js (http://threejs.org/). It uses physics and effects libraries to define WhitestormJS API that contains useful scripts for terrain generation, skybox, animation, physics simulation and post-effects. WhitestormJS simplifies Three.js object crafting algorithm to javascript methods with parameters." />
    <meta name="keywords" content="three.js,cannon.js,webgl,wagner,WHS.API,3d,web,javascript" />
    <meta name="author" content="Alexander Buzin">
    <meta property="og:title" content="WhitestormJS 3D Engine" />
    <meta property="og:site_name" content="WhitestormJS 3D Engine" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="http://www.jsdelivr.com/projects/whitestormjs" />
    <meta property="og:description" content="WhitestormJS is a 3D Javascript engine based on Three.js (http://threejs.org/). It uses physics and effects libraries to define WhitestormJS API that contains useful scripts for terrain generation, skybox, animation, physics simulation and post-effects. WhitestormJS simplifies Three.js object crafting algorithm to javascript methods with parameters." />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@whitestormjs" />
    <meta name="twitter:title" content="whitestormjs" />
    <meta name="twitter:description" content="WhitestormJS 3D Engine" />
    <link rel="shortcut icon" type="image/x-icon" href="http://whitestormjs.xyz/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" href="http://whitestormjs.xyz/favicon.ico" sizes="57x57" />
    <meta name="msapplication-square150x150logo" content="../development/art/logo/Icon-72@2.png" />
    
  <style>
/* Preloading animation */
  #blocker {
	  color:white;
  	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
	  background: rgba(0,0,0,0.7);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
    white-space: nowrap;
  }

  .whs {
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .whs > canvas {
    width: inherit !important;
    height: inherit !important;
  }

  .preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    background: black;
    top: 0px;
    left: 0px;
    z-index: 3;
  }

  .content {
    margin-top: 80px;
    text-align: center;
    font-weight: lighter;
  }

  .content h2 {
    margin-top: 3.5%;
    margin-bottom: 1.5%;
  }

  .controls {
    height: 17.5vh;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
  }

  .pages ul li a {
    font-size: 9px;
  }

  .links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .links li {
    display: inline;
    margin-right: 1.1em;
    margin-left: 1.1em;
  }

  .links:first-child{
    margin-right: 0;
  }

  .links:last-child{
    margin-left: 0;
  }

  .links li a {
    font-size: 20px;
    color: white;
    text-decoration: none;
  }

  .preloader {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .preloader img{
    width: 15vh;
    height: auto;
  }

  .links {
    position: absolute;
    bottom: 10%;
    width: 100%;
  }

sub {
  line-height: 2;

}

h1 {
  font-size: 40px;
}

sub {
  font-size: 20px;
}

p {
  color: #ccc;
}
</style>

    <style>
      body {
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
      }
    </style>
  </head>
  <body>

    
<div id="blocker">
  <div class="content">
    <h1>Click here</h1>
  </div>
</div>

    <script src="../../../build/whitestorm.js"></script>
    
<script src="script.js" defer></script>

  </body>
</html>
